<template>
  <div class="fillContain">
    <div>
      <el-form :inline="true" ref="add_data">
        <el-form-item class="btnRight">
          <el-button v-if="user.identity == 'manager'" type="primary" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <el-table border :data="tableData" max-height="450">
        <el-table-column label="企业名字" align="center" prop="name">
        </el-table-column>
        <el-table-column label="企业地址" align="center" prop="value"></el-table-column>
        <el-table-column label="企业介绍" align="center" prop="intro">
        </el-table-column>
        <el-table-column
          v-if="user.identity == 'manager'"
          align="center"
          label="操作"
          fixed="right"
          width="320"
        >
          <template slot-scope="scope">
            <el-button type="warning" size="samll" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="samll" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="paginations">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @prev-click="handlePre"
            @next-click="handleNext"
            :current-page="currentPage"
            :page-size="10"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!--弹框-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="label">标题图片:</div>
      <el-input v-model="formData.name"></el-input>
      <div class="label">标题:</div>
      <el-input v-model="formData.value"></el-input>
      <div class="label">内容:</div>
     <el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="formData.intro"
  rows="5"
  maxlength="300"
  show-word-limit
></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import { reqFishdataAdd, reqFishdata, reqFishdataDelete,reqFishdataEdit } from "../../api";
import { formDate } from "../../utils/Date.js";
export default {
  components: {
    editor: () => import("@/components/editor")
  },
  data() {
    return {
      dialogVisible: false,
      edit:false,//根据该值来判断是添加还是编辑请求
      editIndex:0,//编辑的数据下标
      user: JSON.parse(localStorage.getItem("token_data")),
      tableData: [],
      formData: {
       name:'',
       value:'[]',
       intro:''
      },
      currentPage: 1,
      total: 1
    };
  },
  created() {
    this.getFishdata(1);
  },
  mounted() {},
  methods: {
   
    //关闭弹框前提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleEdit(index, row) {
      this.edit = true;
      this.editIndex = index;
      this.dialogVisible = true;
      this.formData = row;
    },
    handleDelete(index, row) {
      reqFishdataDelete({ id: row._id })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.tableData.splice(index,1)
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "删除失败",
            type: "error"
          });
        });
    },
    add() {
      this.edit = false;
      this.dialogVisible = true;
      this.formData = {
        name:'',
        value:'[]',
        intro:''
      }
    },
    //点击上一页触发
    handlePre(page) {
      this.getFishdata(page);
    },
    //点击下一页触发
    handleNext() {
      this.getFishdata(page);
    },
    //点击页码触发
    handleCurrentChange(page) {
      this.getFishdata(page);
    },
    //获取新闻消息
    getFishdata(page) {
      reqFishdata({ page })
        .then(res => {
          console.log(res)
          res.data.map(item=>{
            item.value=JSON.stringify(item.value);
            return item;
          })
          this.tableData = res.data;
          this.total = res.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //增加弹出框的确定按钮
    submitBtn() {
      let data = JSON.parse(JSON.stringify(this.formData));
      data.value = JSON.parse(data.value);
      if(this.edit){
         reqFishdataEdit(data)
        .then(res => {
          this.dialogVisible = false;
          this.tableData[this.editIndex]=this.formData;
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          
        })
        .catch(err => {
          console.log(err),
            this.$message({
              message: "编辑失败",
              type: "error"
            });
        });
        return;
      }
      reqFishdataAdd(data)
        .then(res => {
          this.dialogVisible = false;
          this.$message({
            message: "添加成功",
            type: "success"
          });
          window.location.reload();
        })
        .catch(err => {
          console.log(err),
            this.$message({
              message: "添加失败",
              type: "error"
            });
        });
    }
  }
};
</script>

<style scoped >
.fillContain {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.paginations {
  text-align: right;
  margin-top: 10px;
}
.label {
  font-size: 15px;
  padding: 10px 0;
}

</style>
